<style lang="scss" scoped>
#cmain{
    .myreport-list{
        padding: 30px;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0 0 10px 0 #cfcfcf;
        border: 1px solid rgba(255, 255, 255, 0);
        .myreport-header{
            .right{
                float:right;
                width: 20%;
                margin-top: -20px;
            }
        }
        .myreport-table{
            margin-top: 20px;
            position:relative;
            min-height:200px;
            .el-table{
                min-height: 450px;
            }
        }
        .pagination{
            margin-top:20px;
            height: 32px;
            line-height: 32px;
        }
    }
}
</style>

<template>
    <div id="cmain" class='cmain'>
        <div class="myreport-list">
            <div class="myreport-header">
                <!-- <Button type="primary">创建数据</Button> -->
                <Input placeholder="请输入病人编号" class="right" v-model='keyword'>
                    <Button slot="append" icon="ios-search" @click="search"></Button>
                </Input>
            </div>
            <div class="myreport-table">
                <el-table v-if="!isWarnShow" v-loading="loading" :data="myReportList" element-loading-text="数据加载中，请稍后" border style="width:100%" max-height="500">
                    <el-table-column label="病人编号">
                        <template slot-scope="scope">
                            <a @click="goAnalyRet(scope.row.paientid)" href="javascript:;" style="line-height: 45px;">{{scope.row.patientcode}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column  label="病人姓名" width="320">
                        <template slot-scope="scope">
                            <span  href="javascript:;" style="line-height: 45px;">{{scope.row.patientname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="先证者样本">
                        <template slot-scope="scope">
                            <span href="javascript:;" style="line-height: 45px;" v-if="scope.row.sample">{{scope.row.sample.samplecode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="samplecount" label="样本数"  width="100"></el-table-column>
                    <el-table-column label="HPO词条" width="230">
                        <template slot-scope="scope">
                            <Select placeholder="HPO词条" v-model="scope.row.chpoModels[0].chpo">
                                <Option v-for="(item,index) in scope.row.chpoModels" :value='item.chpo' :key="index">
                                </Option>
                            </Select>
                        </template>
                    </el-table-column>
                    <el-table-column label="报告状态" width="100">
                        <template slot-scope="scope">
                            <span href="javascript:;" style="line-height: 45px;" v-text="getStatus(scope.row.isdelete,scope.row.reprotstate)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="报告下载" width="100">
                        <template slot-scope="scope">
                            <Button type="primary" disabled size="small" v-if="scope.row.isdelete">下载</Button>
                            <Button type="primary" size="small" v-if="!scope.row.isdelete && !scope.row.downloading" @click="download(scope.row)">下载</Button>
                            <Button type="primary" size="small" :loading="true" v-if="!scope.row.isdelete && scope.row.downloading">下载</Button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reportdata" label="创建日期"></el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn v-if="isWarnShow" @callback="getMyReportList"></warn>
            </div>
            <div v-if="!isWarnShow" class="pagination">
                <el-pagination style="float:left" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :current-page="currentPage" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
                <div style="font-size:13px;color:#606266;float:left;padding:1px 5px;">共{{sampleCount}}个样本</div>
            </div>
        </div>
        <Modal v-model="downloadModal" title="报告下载地址">
            <p>{{downloadUrl}}</p>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
import {data} from "api/index.js";
import warn from '@/components/warn.vue';
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
export default {
    name:"myReport",
    data(){
        return{
            selected:"12",
            isWarnShow:false,
            sampleCount: 0, //样本总数
            total: 0,       //数据总数
            currentPage: 1,  //当前页数
            pageSize: 5,    //每页多少条
            loading:false,
            myReportList:[],
            downloadModal:false,
            downloadUrl:'',
            emptyShow:false,
            keyword:'',
            searchflag:false,
        }
    },
    methods:{
        getCouponSelected(){
            console.log(this.selected)
        },
        search(){
            this.searchflag=true;
            this.pageSize=5;
            this.currentPage=1;
            this.getMyReportList()
        },
        getMyReportList(){
            let obj={
                userId: getCookie("userid"),
                pageSize:this.pageSize,
                pageIndex:this.currentPage,
                productId:this.$store.state.productId
            }
            this.loading=true;
            if(this.searchflag){
                obj['patientcode']=this.keyword;
            }
            data.getMyReport(obj).then((res)=>{
                console.log(res)
                if(res.returnCode==0 || res.returnCode==200){
                    let newlist=res.data;
                    newlist.forEach(function(element) {
                        if(element.chpoModels.length>0){
                            element.chpoModels.forEach(function(ele){
                                ele['chpo']=ele.chpo_num+":"+ele.chpo_cn
                            })
                        }else{
                            let obj={
                                chpo:""
                            }
                            element.chpoModels.push(obj)
                        }
                        element["downloading"] = false;
                        element["href"] = "";
                    }, this);
                    console.log(newlist)
                    this.myReportList=newlist;
                    this.sampleCount=res.data.sampleCount;
                    this.total=res.data.length;
                    this.loading=false;
                }
                else{
                    this.$Message.error(res.msg);
                    this.loading=false;
                }
                this.isWarnShow = false;
                if(this.myReportList==null || this.myReportList.length==0){
                    this.emptyShow=true;
                }else{
                    this.emptyShow = false;
                }
            }).catch((error)=>{
                // this.$Message.error(error);
                this.loading=false;
                this.isWarnShow = true;
            })
        },
        download(row){
            let obj={
                reportid:row.reportid
            }
            row.downloading = true;
            var that =this;
            data.downloadMyReport(obj).then((res)=>{
                if(res.returnCode==0||res.returnCode==200){
                    let iframe = document.createElement('iframe')
                    iframe.style.display = 'none'
                    iframe.src = res.data;
                    document.body.appendChild(iframe);
                    // 防止下载两次
                    setTimeout(function() {
                        document.body.removeChild(iframe)
                    }, 1000);
                   
                }
                else{
                    this.$Message.error(res.msg);
                }
                row.downloading = false;
            }).catch((error)=>{
                this.$Message.error(error);
                row.downloading = false;
            })
        },
        handleSizeChange(size){ //每页多少条数据
            this.pageSize=size;
            this.$store.state.pageSize = size;
            this.getMyReportList();
        },
        handleCurrentChange(page){ //当前页
            this.currentPage=page;
            this.getMyReportList();
        },
        //跳转到查看分析结果页面
        goAnalyRet(patientid){
            let obj = {
                paientId: patientid, //row.patientid
                type: 6,
                userId: getCookie("userid"),
                productId: this.$store.state.productId
            };
            this.loading=true;
            data.reviewVcfAnnoation(obj).then(res => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                    this.$store.state.patientid = patientid;
                    var a = document.createElement("a");
                    a.setAttribute("target", "_blank");
                    a.setAttribute( "href","/rare/analyticRet2?patientId=" +patientid +"&productId=" +this.$store.state.productId +"");
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                } else if (res.returnCode == 605) {
                    this.$Message.success(res.msg);
                } else if (res.returnCode == 611) {
                    var _this = this;
                    this.$Modal.confirm({
                        title: "确认提示",
                        content: "<p>信息已修改，是否重新注释?</p>",
                        onOk: () => {
                            _this.uploadAnnoation(patientid);
                        },
                        onCancel: () => {
                            this.$store.state.patientid = patientid;
                            // this.$store.state.analysisList=M.clone(res.data);
                            this.$store.state.pageindex = this.currentPage;
                            var a = document.createElement("a");
                            a.setAttribute("target", "_blank");
                            a.setAttribute("href","/rare/analyticRet2?patientId=" +row.patientid +"&productId=" +_this.$store.state.productId +"");
                            document.body.appendChild(a);
                            a.click();
                            document.body.removeChild(a);
                        }
                    });
                } else {
                    this.$Message.error(res.msg);
                }
                this.loading = false;
            });
        },
        //重新注释
        uploadAnnoation(id) {
            let obj = {
                paientId: id,
                type: 6,
                userId: getCookie("userid"),
                productId: this.$store.state.productId
            };
            data.uploadAnnoation(obj).then(res => {
                if (res.returnCode == 0 || res.returnCode == 200) {
                this.$Message.success(res.msg);
                }
            });
        },
        //获取报告状态
        getStatus(isDelete,status){
            var ret = "";
            if(isDelete){
                ret = "已删除";
            }else{
                if(status == 3){
                    ret = "已完成";
                }else{
                    ret = "未完成";
                }
            }
            return ret;
        }
    },
    mounted() {
        this.pageSize=this.$store.state.pageSize;
        this.getMyReportList();
    },
    components:{
        warn
    }
}
</script>


